import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button, ScrollView, Image } from '@tarojs/components';
import PdsEmpty from '@/components/common/pds_empty';
import { formatDate, parseDateFromStr } from '@/utils/fomatter';
import './index.scss'
import { Cell } from '@antmjs/vantui';
import { queryWalletUserFlow } from '@/services/api/wallet';
import { findNameByFieldNameAndDictItemValue } from '@/services/api/common';

class PersonInfoUseRecord extends Component {

    config = {
        navigationBarTitleText: ''
    }

    state = {
        dataList: [],
        refresherTriggered: false,
        skeletonLoading: true,
    }

    componentWillMount() {
        this.requestListData(false);
     }
    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }

    //自定义下拉刷新被触发
    onRefresherRefresh(e) {
        this.setState({ refresherTriggered: true })
        console.log(e, '自定义下拉刷新被触发')
        this.requestListData(false);
    }

    // 滚动到底部上拉加载
    scrolltoLower() {
        this.requestListData(true);
    }

    /**
     * 快速滑动不触发onScrollToLower 的bug
     * @param param0 
     */
    onScroll = ({ detail: { scrollTop, scrollHeight } }) => {
        const { screenHeight, } = Taro.getSystemInfoSync()
        if (
            scrollTop + screenHeight + 100 >= scrollHeight
        ) {
            // this.scrolltoLower(); // 手动触发 onScrollToLower
        }
    };

    /**
   * 
   * @param isAdd 
   */
    requestListData(isAdd) {
        const { dataList, } = this.state;
        var offset = isAdd ? dataList.length : 0;
        queryWalletUserFlow(offset).then((resp) => {
            if (resp.code === 200) {
                if (isAdd) {
                    var tempList: any[] = dataList
                    tempList.push(...resp.data)
                    this.setState({ dataList: tempList });
                } else {
                    this.setState({ dataList: resp.data });
                }
            }
            this.setState({ refresherTriggered: false, skeletonLoading: false })
        })
    }

    render() {
        const { dataList, refresherTriggered } = this.state;
        var scrollTop = 0;
        return (
            <View className='page'>
                <ScrollView
                    className='scrollview'
                    scrollY
                    scrollWithAnimation
                    refresherEnabled
                    scrollTop={scrollTop}
                    refresherTriggered={refresherTriggered}
                    lowerThreshold={150}
                    onRefresherRefresh={this.onRefresherRefresh.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
                    onScrollToLower={this.scrolltoLower.bind(this)}
                    onScroll={this.onScroll.bind(this)}
                >
                    {
                        dataList.length === 0 ? <PdsEmpty placeholderText='暂无相关数据'></PdsEmpty> : null
                    }
                    {
                        dataList.map((item, index) => {
                            return <View className='table-content-item'>
                                <View className='table-content-item-top'>
                                    <Image src={require('@/assets/icons/public/public_ydt_icon.svg')}></Image>
                                    <Text>{item['operOrgName']}</Text>
                                </View>
                                <Cell title={'操作时间'} value={formatDate(item['created'],'YYYY-MM-DD')} border={false} />
                                <Cell title={'操作类型'} value={findNameByFieldNameAndDictItemValue('operation_type',item['operationType'])} border={false} />
                                <Cell title={'使用内容'} value={findNameByFieldNameAndDictItemValue('digital_type',item['digitalType'])} border={false} />
                                <Cell title={'链上Hash'} value={item['txHash']} border={false} />
                            </View>
                        })
                    }
                </ScrollView>
            </View>
        );
    }
}

export default PersonInfoUseRecord;